Day28 Flask（五）

2024 iThome 鐵人賽

DAY 28

Python

少年Py 的漂流日記- 第一次相遇系列第 28 篇

16th鐵人賽

hiyja

團隊NUTC imac

2024-10-06 00:01:24

64 瀏覽

分享至

在 Web 應用中，文件上傳是一個常見的功能，今天我們將介紹如何在 Flask 中實現文件上傳的功能。
首先我們需要設置一個存放上傳文件的資料夾。我們可以使用 UPLOAD_FOLDER 來指定文件上傳的目標資料夾。為了避免不安全的文件格式，我們還可以設置允許上傳的文件類型。

from flask import Flask, request, render_template, redirect, url_for
import os

app = Flask(__name__)

# 設置文件上傳的資料夾
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# 設置允許上傳的文件類型
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

# 檢查文件是否是允許的類型
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/')
def index():
    return render_template('upload.html')

@app.route('/upload', methods=['POST'])
def upload_file():
    # 檢查是否有文件在請求中
    if 'file' not in request.files:
        return 'No file part'
    file = request.files['file']
    # 如果沒有選擇文件
    if file.filename == '':
        return 'No selected file'
    # 檢查文件是否是允許的類型
    if file and allowed_file(file.filename):
        # 儲存文件
        filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
        file.save(filepath)
        return f'File successfully uploaded to {filepath}'
    return 'File type not allowed'

if __name__ == '__main__':
    # 如果上傳資料夾不存在，則創建它
    if not os.path.exists(UPLOAD_FOLDER):
        os.makedirs(UPLOAD_FOLDER)
    app.run(debug=True)

接著我們需要創建一個表單頁面，在 templates 資料夾中新增 upload.html，內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上傳</title>
</head>
<body>
    <h1>上傳文件</h1>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <label for="file">選擇文件:</label>
        <input type="file" name="file" id="file" required>
        <br><br>
        <input type="submit" value="上傳">
    </form>
</body>
</html>

當用戶通過表單提交文件時，upload_file() 就會處理上傳的文件。它會檢查文件是否存在，是否為允許的文件類型，然後再將文件保存到我們指定的資料夾當中。

我們還可以設置最大文件大小限制，以避免用戶上傳過大的文件。可以通過設定 MAX_CONTENT_LENGTH 來實現。例如將最大文件大小設置為 16MB：
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 16MB

要測試功能的話，我們可以在瀏覽器中訪問 http://127.0.0.1:5000/ ，然後嘗試上傳圖片檔，檢查文件是否成功保存到指定的資料夾中。